<template>
  <div style="margin-top: 15px">
    <el-table
      :data="tableData"
      stripe
      highlight-current-row
      border
      fit
      style="width: 100%">
      <el-table-column
        v-if="tableView.type === type"
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        v-for="(row,index) of tableView.columns"
        :prop="row.prop"
        :key="index"
        :align="row.align? row.align :'center'"
        :header-align="row.headerAlign? row.headerAlign :'center'"
        :label="row.label"
        :formatter="row.formatter"
      >
        <template slot-scope="scope">
          <!-- 显示时间 -->
          <span v-if="row.type === columnType.DATA && !row.formatter"> {{ formatterTime(scope.row[row.prop]) }} </span>
          <!-- 文本格式化 -->
          <span v-else-if="row.formatter && !row.gesture">
          {{ row.formatter(scope.row[row.prop]) }}
        </span>
          <!-- <span v-else-if="row.formatter && !row.gesture && row.type === columnType.TEXT"> {{ row.formatter(scope.row,row,index) }} </span> -->
          <!-- 鼠标转手势 -->
          <a v-else-if="row.gesture && row.click && row.type === columnType.TEXT" href="#"
             @click="row.click(scope.row,row,index)">{{scope.row[row.prop]}}</a>
          <!-- 图片列表 -->
          <div v-else-if="row.type === columnType.IMAGE">
            <el-popover
              placement="top"
              trigger="hover"
            >
              <div>
                <el-image
                  :src="scope.row[row.prop]"
                  style="width:80%;margin: 0 auto;"
                  :alt="row.alt"
                  :fit="row.fit? row.fit:columnType.fit"></el-image>
              </div>
              <el-image
                style="width: 100px; height: 100px;margin: 0 auto;padding-top: 15%  "
                slot="reference"
                :src="scope.row[row.prop]"
                :alt="row.alt"
                :fit="row.fit? row.fit:columnType.fit"></el-image>
            </el-popover>
          </div>
          <!-- 文本 -->
          <span v-else-if="row.type === columnType.TEXT"> {{scope.row[row.prop]}}</span>
        </template>
      </el-table-column>
      <el-table-column
        :fixed="tableView.fixed"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <div v-if="tableView.footBut && tableView.footBut.length === 1">
            <el-button @click=" tableView.footBut[0].click(scope.row,scope.$index)"
                       :type="tableView.footBut[0].type? tableView.footBut[0].type:'primary'"
                       :icon="tableView.footBut[0].icon? tableView.footBut[0].type:'null'"
                       size="mini">
              {{tableView.footBut[0].label}}
            </el-button>
          </div>
          <div v-if="tableView.footBut && tableView.footBut.length > 1">
            <el-dropdown>
              <span class="el-dropdown-link">更多操作<i
                class="el-icon-arrow-down el-icon--right"></i> </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-plus"
                                  :type="tableView.footBut[0].type? tableView.footBut[0].type:'primary'"
                                  v-for="(but,butIndex) of tableView.footBut"
                                  :key="butIndex"
                                  :icon="but.icon"
                >
                  <template>
                    <el-button @click="but.click(scope.row,scope.$index)" type="text"> {{ but.label }}</el-button>
                  </template>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>


<script>
  import CommonTableEnum from "../enum/CommonTableEnum";
  import {formatterSpecificTime} from '../../utils/Coment'
  import {errorMessage} from "../../utils/Message";
  import {startLoading} from "../../utils/Common";

  export default {
    name: 'TableView',
    props: {
      tableView: {
        /* 表格数据 */
        data: [],
        /* 是否分页 */
        isPaging: false,
        /* 是否多选 */
        isSelect: null,
        /* 行尾部按钮是否固定 */
        fixed: null,
        /* 刷新表格 */
        refresh: 0,
        /* 表格接口 */
        api: null,
        /* 表格额外请求参数 */
        otherApiParam: null,
        /* 請求之前 箭頭函數 */
        beforeRequest:null
      },
      tabParam: null,
    },
    watch: {
      'tableView.refresh': {
        handler(val) {
          this.api()
        }
      },
    },
    mounted() {

    },
    data() {
      return {
        loading: null,
        type: CommonTableEnum.SELECTION,
        tableData: [],
        tab: null,
        page: {
          page: 1,
          limit: 10,
        },
        param: {},
        columnType: {
          TEXT: CommonTableEnum.TEXT,
          DATA: CommonTableEnum.DATE,
          IMAGE: CommonTableEnum.IMAGE,
          fit: CommonTableEnum.NONE
        }
      }
    },
    methods: {

      /**
       * 格式化时间
       */
      formatterTime(data) {
        return formatterSpecificTime(data)
      },

      /**
       * 获取tabs 请求参数
       */
      getTabsParam(val) {
        this.tab = val;
        this.api()
      },

      /**
       *  获取搜索栏搜索数据
       */
      getSerachInputParam(val) {
        this.getParamObject(val);
        this.api()
      },

      /**
       * 获取其他请求参数
       */
      getOtherApiParam() {
        if (this.tableView.otherApiParam)
          this.getParamObject(this.tableView.otherApiParam);
        if ( !this.tableView.otherApiParam || !this.tableView.otherApiParam.page || !this.tableView.otherApiParam.limit) {
          this.getParamObject(this.page);
        }
      },

      /**
       *  遍历请求对象 获取参数
       */
      getParamObject(val) {
        if (val === null) return;
        for (let item in val)this.param[item] = val[item]
      },

      /**
       * api请求
       */
      api(){
        if (!this.tableView.api) return errorMessage("请求失败！无table API");
        if (this.tab)this.param[this.tab] = this.tab;
        this.getOtherApiParam();
        if(this.tableView.beforeRequest){
          if(typeof this.tableView.beforeRequest != 'function'){
            return errorMessage("请求失败！beforeRequest API 不是一個方法");
          }
         this.param =  this.tableView.beforeRequest(this.param)
        }
        return new Promise(((resolve, reject) => {
          this.$http({
            url: this.$http.getRequest(this.tableView.api),
            method: 'post',
            data: this.$http.adornData(this.param, false)
          }).then((data) => {
            this.param = {};
            let source = data.data.data
            if(source.list){
              this.tableData = source.list;
              this.$emit('getPageTotal',source.total,source.pageSize)
            }
          })
        }))
      },

      /**
       * 计算分页
       * @param val
       */
      currentChange(val) {
        this.page.page = val
        this.api()
      },

    },
  }
</script>


<style scoped>

</style>
